<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>产品登记</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script  src="/js/jquery.min.js"></script>
    <script  src="/js/pinyin.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
	<script  src="/js/exif.js"></script>

    <style type="text/css">
        .ivu-input{
            height: 50px;
        }
        .demo-upload-list{
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0,0,0,.2);
            margin-right: 4px;
        }
        .demo-upload-list img{
            width: 100%;
            height: 100%;
        }
        .demo-upload-list-cover{
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.6);
        }
        .demo-upload-list:hover .demo-upload-list-cover{
            display: block;
        }
        .demo-upload-list-cover i{
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
        }
        .inp{
            margin-bottom: 10px;
        }
        .submit-btn{
            height: 50px;
            line-height: 50px;
            margin:20px 0;
        }
        .manufactor{
            overflow: hidden;
            margin-top: 10px;
        }
        .ivu-select-single .ivu-select-selection{
            height: 50px;
        }
        .ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
            height: 48px;
            line-height: 48px;
        }
        .manu .ivu-select-input{
            height: 48px;
            line-height: 48px;
        }
    </style>
</head>
<body>
<div id="app" class="col-md-12" style="margin: 10px;position:relative;">
	
    <i-input v-model="code" placeholder="请输入内部货号" class="inp"></i-input>
	<i-input v-model="codeOutside" placeholder="请输入外部货号" class="inp"></i-input>
	<i-input v-model="creator" placeholder="请输入创建人" class="inp"></i-input>
    <i-input v-model="title" placeholder="请输入商品标题" class="inp"></i-input>
	<i-input v-model="material" placeholder="请输入商品材质" class="inp"></i-input>

    <i-input v-model="price" placeholder="请输入建议零售价" class="inp"></i-input>

    <i-input v-model="originPrice" placeholder="请输入进货价" class="inp"></i-input>

    <i-select v-model="model1" style="height: 50px;width:100%" placeholder="请选择厂家" class="manu" filterable @on-change="manuChange">
        <i-option v-for="item in List1" :value="item.value" :key="item.value">@{{ item.value+'-'+item.label }}</i-option>
    </i-select>

    <div class="manufactor">
        <i-input v-model="manufactorInp" placeholder="请输入厂家" class="inp" style="width: 60%; margin-top: 12px;height: 50px;"></i-input>
        <i-button type="primary" style='width: 38%; height: 50px;' @click='addManufactor'>新增厂家</i-button>
    </div>


    <div style="margin-top:10px;" >
        <Upload ref="upload" action="/api/upload/store" :data="data"  multiple  :show-upload-list="showUpList" style="height: 50px;" :on-success="onSucc">
            <i-button icon="ios-cloud-upload-outline">图片上传</i-button>
        </Upload>
    </div>

    <div class="demo-upload-parent">
        <div class="demo-upload-list" v-for="(item,index) in uploadList">
            <img :src="item">
            <div class="demo-upload-list-cover">
                <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
            </div>
        </div>
    </div>

    <i-input v-model="inpColor" placeholder="请输入颜色,空格隔开" class="inp" style='margin-top: 10px;'></i-input>
    <i-input v-model="inpSize" placeholder="请输入尺寸,空格隔开" class="inp"></i-input>
    <div class="table-parent" style="overflow: hidden;">
        <i-input v-model="inpCount" placeholder="请输入数量" class="inp" style='width: 60%;margin-top: 12px;'></i-input>
        <i-button type="primary" style='width: 38%; height: 50px;' @click='add'>添加规格</i-button>
    </div>
    <i-table :columns="columns7" :data="data6"></i-table>
    <i-button  type="success" long class="submit-btn" @click='submit' >提交</i-button>
	<Spin size="large" fix v-if="spinShow"></Spin>
</div>
<script>
    vm = new Vue({
        el: '#app',
        data() {
            return {
				spinShow:false,
                manufactorInp:'',
                inpColor:'',inpSize:'',inpCount:'',
                model1: '',
                List1: [],
                data:{
                    dir:'products',
                    type : 'Image'
                },
                showUpList:false,
                uploadList:[],
                imgName: '',
                visible: false,
                title:'',
				material:'',
                recommend:'',
                price:'',
                originPrice:'',
				creator:'',
                code:'',
				codeOutside:'',
                intt:'',
                columns7: [
                    {
                        title: '颜色',
                        key: 'sku_color',
                        render: (h, params) => {
                            return h('div', [

                                h('Input', {
                                    props: {
                                        value: params.row.sku_color
                                    },
                                    on: {
                                        "on-change": (v) => {
                                            this.data6[params.index].sku_color=v.target.value;
                                        }
                                    }
                                }, )
                            ]);
                        }
                    },
                    {
                        title: '尺寸',
                        key: 'sku_size',
                        render: (h, params) => {
                            return h('div', [

                                h('Input', {
                                    props: {
                                        value: params.row.sku_size
                                    },
                                    on: {
                                        "on-change": (v) => {
                                            this.data6[params.index].sku_size=v.target.value;
                                        }
                                    }
                                }, )
                            ]);
                        }
                    },
                    {
                        title: '数量',
                        key: 'sku_stock',
                        render: (h, params) => {
                            return h('div', [

                                h('Input', {
                                    props: {
                                        value: params.row.sku_stock
                                    },
                                    on: {
                                        "on-change": (v) => {
                                            this.data6[params.index].sku_stock=v.target.value;
                                        }
                                    }
                                }, )
                            ]);
                        }
                    },
                    {
                        title: '价格',
                        key: 'sku_price',
                        render: (h, params) => {
                            return h('div', [
                                h('Input', {
                                    props: {
                                        value: params.row.sku_price
                                    },
                                    on: {
                                        "on-change": (v) => {
                                            this.data6[params.index].sku_price=v.target.value;
                                        }
                                    }
                                }, )
                            ]);
                        }
                    },
                    {
                        title: '成本价格',
                        key: 'sku_price',
                        render: (h, params) => {
                            return h('div', [
                                h('Input', {
                                    props: {
                                        value: params.row.sku_cost_price
                                    },
                                    on: {
                                        "on-change": (v) => {
                                            this.data6[params.index].sku_cost_price=v.target.value;
                                        }
                                    }
                                }, )
                            ]);
                        }
                    }
                    /*{
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [

                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }*/
                ],
                data6: []
            }
        },
        mounted() {
            if(localStorage.getItem('manu')){
                this.model1=localStorage.getItem('manu');
            }

            axios.get('/api/manu/data').then((response) => {
                var data=response.data;
                data.forEach(function (item) {
                    vm.List1.push({
                        value: item.manu_no,
                        label: item.manu_name
                    })
                })


            }).finally(function(){
            });

        },
        watch:{
            code(){
                if(this.intt){
                    clearTimeout(this.intt);
                }
                prod_no = this.code;

                this.intt = setTimeout(function(){
                    axios.get('/api/product/item?prod_no='+prod_no).then((response) => {
                            data = response.data;
                            if(data.result){
                                item = data.result;
								vm.creator = item.creator;
                                vm.title = item.prod_name;
								vm.material = item.material;
                                vm.originPrice = item.cost_price;
                                vm.price = item.prod_price;
                                vm.model1 = item.manu_no;
								vm.codeOutside = item.prod_out_no
                                vm.uploadList = [];
                                vm.uploadList= JSON.parse(item.prod_img);

                                vm.inpColor = item.colors;
                                vm.inpSize = item.sizes;
                                vm.inpCount = item.skus[0].sku_stock;
                                vm.data6 = item.skus;
                            }


                    });
                },500)
            }
        },
        methods: {
            onSucc(response){
                data = response;
                this.uploadList.push(data.result);
            },
            addManufactor(){
                var ma=vm.manufactorInp.trim();
                var pin=pinyin.getCamelChars(ma);


                axios.post('/api/manu/store', {
                    "data": [
                        {
                            "manu_no": pin,
                            "manu_name": ma
                        }
                    ]
                }).then((response) => {
                    console.log(response.data);
                    if(response.data.code==200){
                        vm.$Message.info('成功新增厂家');
                        vm.List1.push({
                            value: pin,
                            label: ma
                        });
                        vm.model1 = pin;
                    }

                }).finally(function(){
                })
            },
            manuChange(v){
                console.log(v);
                localStorage.setItem('manu',v);
            },
            selChange(v){
                console.log(v);
                this.third_cid=v;
            },
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (index) {
                this.uploadList.splice(index, 1);
            },

            add(){
                let price = this.price;
                let originPrice = this.originPrice;
                var color=this.inpColor.trim();
                if(color==''){
                    this.$Message.info('请输入颜色，空格隔开');
                    return;
                }
                var size=this.inpSize.trim();
                if(size==''){
                    this.$Message.info('请输入尺寸，空格隔开');
                    return;
                }
                var count=parseInt(this.inpCount.trim());
                if(count=='' || count==null || count==NaN ){
                    this.$Message.info('请输入数量');
                    return;
                }

                tmp_color=color.split(' ');
                color = [];
                for(c of tmp_color){
                    if(c){
                        color.push(c);
                    }
                }
                tmp_size=size.split(' ');
                size = [];
                for(s of tmp_size){
                    if(s){
                        size.push(s);
                    }
                }
                vm.data6 = [];


                color.forEach(function (curColor) {
                    size.forEach(function (curSize) {
                        vm.data6.push({
                            sku_color: curColor,
                            sku_size: curSize,
                            sku_stock: count,
                            sku_price: price,
                            sku_cost_price: originPrice
                        });
                    })
                })

            },
            submit(){
				

				if(vm.codeOutside.trim()==''){
                    this.$Message.info('请输入外部货号');
                    return;
                }
				if(vm.creator.trim()==''){
                    this.$Message.info('请输入创建人');
                    return;
                }
                if(vm.title.trim()==''){
                    this.$Message.info('请输入商品标题');
                    return;
                }
				if(vm.material.trim()==''){
                    this.$Message.info('请输入商品材质');
                    return;
                }

                if(vm.price==''){
                    this.$Message.info('请输入建议零售价');
                    return;
                }
                if(vm.originPrice==''){
                    this.$Message.info('请输入原价');
                    return;
                }
                if(vm.model1==''){
                    this.$Message.info('请选择厂家');
                    return;
                }
				let uploadListLen=this.uploadList.length;
				console.log('图片张数'+uploadListLen);
				if(uploadListLen==0){
                    this.$Message.info('请上传图片');
                    return;
                }
                else if(uploadListLen>5){
                    this.$Message.info('最多上传5张图');
                    return;
                }
				if(vm.data6.length==0){
                    vm.$Message.info('请填写商品规格');
                    return;
                }
                let arr=[];
				vm.spinShow=true;
				up(0);
				function up(index){
					var img = new Image();
					img.src = vm.uploadList[index];
					img.setAttribute("crossOrigin",'Anonymous');
					img.onload = function() {
						EXIF.getData(img, function() {
							var or = EXIF.getTag(this, "Orientation");
							if(or==6){
								var realWidth = img.width;
								var realHeight = img.height;
								var canvas = document.createElement("canvas");
								var ctx = canvas.getContext('2d');
								var base64;
								canvas.width = realHeight/3;
								canvas.height = realWidth/3;
								ctx.rotate(Math.PI/180*90);
								ctx.drawImage(img,0,0,realWidth,realHeight, 0, -canvas.width,canvas.height,canvas.width);
								base64 = canvas.toDataURL('image/jpeg', 1);
								axios.post('/api/upload/bs', { 
									file:base64,
									dir:'products',
									type:'Image'
								}).then((response) => {
									console.log(response.data.result);
									arr.push(response.data.result);
									index++;
									if(index==uploadListLen){
										console.log(arr);
										let time=(new Date()).getTime();
										axios.post('/api/product/reg', {
											"creator": vm.creator.trim(),
											"prod_no": vm.code.trim(),
											"prod_out_no": vm.codeOutside.trim(),
											"prod_name":vm.title.trim(),
											"material":vm.material.trim(),
											"manu_no":vm.model1,
											"manu_name":$('.manu .ivu-select-input').val().trim(),
											"cost_price":vm.originPrice,
											"prod_price":vm.price,
											"prod_img":arr,
											"skus": vm.data6

										}).then((response) => {
											vm.spinShow=false;
											vm.$Message.info(response.data.msg);
											window.location.reload();
										}).finally(function(){
										})
									}
									else{
										up(index);
									}
								})
								
							}
							else{
								arr.push(vm.uploadList[index]);
								index++;
								if(index==uploadListLen){
									console.log(arr);
									let time=(new Date()).getTime();
									axios.post('/api/product/reg', {
										"creator": vm.creator.trim(),
										"prod_no": vm.code.trim(),
										"prod_out_no": vm.codeOutside.trim(),
										"prod_name":vm.title.trim(),
										"material":vm.material.trim(),
										"manu_no":vm.model1,
										"manu_name":$('.manu .ivu-select-input').val().trim(),
										"cost_price":vm.originPrice,
										"prod_price":vm.price,
										"prod_img":arr,
										"skus": vm.data6

									}).then((response) => {
										vm.spinShow=false;
										vm.$Message.info(response.data.msg);
										window.location.reload();
									}).finally(function(){
									})
								}
								else{
									up(index);
								}
							}
						});
					};
					
					
					
					
				}
            },

            remove (index) {
                console.log(index);
                this.data6.splice(index, 1);
                console.log(this.data6);
            }

        },

    });
</script>
</body>
</html>
